<template>
    <van-tabbar v-model="active" @change="onChange" active-color="#3DCEB9" v-if="$route.meta.footer">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
export default {
    name:"Footer",
    data() {
        return {
            active:0
        }
    },
    updated(){
        console.log(this.$route);
        switch(this.$route.name){
            case 'index':
                this.active = 0;
                break;
            case 'cart':
                this.active = 1;
                break;
            case 'usercenter':
                this.active = 2;
                break;
        }
    },
    methods:{
        onChange(index){
            console.log(index);
            this.active = index;
            switch(index){
                case 0:
                    this.$router.push('/');
                    break;
                case 1:
                    this.$router.push('/cart');
                    break;
                case 2:
                    this.$router.push('/usercenter');
                    break;
                default:
                    this.$router.push('/');
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    
</style>